<template>
  <el-container>
    <el-header>
      <p class="fenqutitle" style="font-size:24px;font-style:inherit;">
        人员管理
        <el-input
          placeholder="根据'用户账号'搜索用户"
          prefix-icon="el-icon-search"
          v-model="inputUserCode"
          style="width:160px;float:right;"
          @keyup.enter.native="getUserList()"
          clearable
        ></el-input>
      </p>
    </el-header>
    <el-divider></el-divider>
    <el-main>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed prop="userCode" label="账号" width="150"></el-table-column>
        <el-table-column prop="userId" label="用户id" width="170"></el-table-column>
        <el-table-column prop="userRole" label="角色" width="80"></el-table-column>
        <el-table-column prop="userEmail" label="邮箱" width="180"></el-table-column>
        <el-table-column prop="userPhone" label="手机号" width="120"></el-table-column>
        <el-table-column prop="userName" label="昵称" width="120"></el-table-column>
        <el-table-column prop="isBlack" label="状态（是否禁用（Y:是，N:否））" width="180"></el-table-column>
        <el-table-column prop="isVIP" label="ISVIP" width="60"></el-table-column>
        <el-table-column prop="userSex" label="性别" width="60"></el-table-column>
        <el-table-column prop="createTime" label="注册时间 " width="170"></el-table-column>
        <el-table-column prop="updatId" label="修改人id " width="170"></el-table-column>
        <el-table-column prop="updateName" label="修改人昵称 " width="120"></el-table-column>
        <el-table-column prop="updateCode" label="修改人账号 " width="120"></el-table-column>
        <el-table-column prop="updateTime" label="修改时间 " width="170"></el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" size="small"  @click="userDetail(scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="userUpdate(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="userDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="float:right;padding:20px">
        <el-pagination
          @size-change="getUserList"
          @current-change="getUserList"
          :current-page.sync="currentPage"
          :page-sizes="[5,15,50, 100,200,500,1000]"
          :page-size.sync="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "usermanage",
  data() {
    return {
      total: 0, //总记录条数
      currentPage: 1,
      pageSize: 15,
      inputUserCode: "",
      scope: "",
      tableData: []
    };
  },
  created() {
    this.getUserList();
  },
  methods: {
    getUserList() {
      this.axios({
        method: "get",
        params: {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          userCode: this.inputUserCode
        },
        url: "http://localhost:8090/user/all"
      })
        .then(r => {
          this.tableData = r.data.records;
          this.total = r.data.total;
        })
        .catch(e => {
          this.$message.error(e.response.data.message);
        });
    },
    //直接到该用户的详情页
    userDetail(row) {
      this.$router.push({
        path: "/person/zhuye/" + row.userId,
        target: "_blank"
      });
    location.reload();
    },
    userUpdate(row) {
      this.$router.push("/manage/updateUser/" + row.userId);
    },
    userDelete(row) {
      this.$confirm("是否删除用户\t'" + row.userName + "' 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.axios({
            method: "get",
            params: {
              id: row.userId
            },
            url: "http://localhost:8090/user/delete"
          })
            .then(res => {
              this.getUserList();
              this.$message({
                type: "success",
                message: "删除成功!"
              });
            })
            .catch(e => {
               this.$message.error(e.response.data.message);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>
<style   scoped>
.videocontainer {
  background-color: white;
  width: 90%;
  position: relative;
  top: 30px;
  left: 80px;
}

.fenqutitle {
  padding-top: 30px;
}
.list-item {
  padding: 8px;
}
.list {
  width: 100%;
}
</style>